<template>
  <a-layout :class="['layout', 'beauty-scroll', device]">
    <!-- SideMenu -->
    <a-drawer
      v-if="isMobile"
      placement="left"
      :class="`drawer-sider ${navTheme}`"
      :closable="false"
      :width="256"
      :visible="collapsed"
      @close="drawerClose"
    >
      <side-menu
        mode="inline"
        :menus="menus"
        :theme="navTheme"
        :collapsed="false"
        :collapsible="true"
        @menuSelect="menuSelect"
      ></side-menu>
    </a-drawer>

    <side-menu
      v-else-if="layoutMode === 'sidemenu'"
      :key="'side-sidemenu'"
      mode="inline"
      :menus="menus"
      :theme="navTheme"
      :collapsed="collapsed"
      :collapsible="true"
    ></side-menu>
    <side-menu
      v-else-if="layoutMode === 'mixmenu' && subMenus.length > 0"
      :key="'side-mixmenu'"
      mode="inline"
      :menus="subMenus"
      :theme="navTheme"
      :collapsed="collapsed"
      :collapsible="true"
    ></side-menu>
    <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
      :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }"
    >
      <!-- layout header -->
      <global-header
        :mode="layoutMode"
        :menus="menus"
        :theme="navTheme"
        :collapsed="collapsed"
        :collapsed-icon="layoutMode.value === 'sidemenu' || subMenus.length > 0"
        @toggle="toggle"
        @refresh="onRefresh"
      />

      <!-- layout content -->
      <a-layout-content
        :style="{
          height: '100%',
          margin: '24px 12px 0',
          paddingTop: fixedHeader && layoutMode != 'mixmenu' ? '64px' : '0'
        }"
      >
        <multi-tab v-if="multiTab" @refresh="onRefresh"></multi-tab>
        <s-scroll
          :style="{
            width: '100%',
            height: multiTab ? 'calc( 100vh - 120px)' : 'calc( 100vh - 90px)'
          }"
        >
          <route-view v-if="showRouter" />
        </s-scroll>
      </a-layout-content>
      <setting-drawer></setting-drawer>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch, onMounted, nextTick } from 'vue'
import { triggerWindowResizeEvent, isMobile, isDesktop } from '@/utils/device'
import RouteView from './RouteView.vue'
import MultiTab from '@/components/MultiTab/index.vue'
import SideMenu from '@/components/Menu/SideMenu.vue'
import GlobalHeader from '@/components/GlobalHeader/index.vue'
import SettingDrawer from '@/components/SettingDrawer/index.vue'
import { SET_SIDEBAR_TYPE, MENU_NAV } from '@/store/mutation-types'
import { currentApp } from '@/store/useSiteSettings'
import {
  fixSidebar,
  sidebarOpened,
  multiTab,
  device,
  layoutMode,
  contentWidth,
  fixedHeader,
  navTheme,
  menuChangeFlag,
  isSideMenu
} from '@/store/useSiteSettings'
import ls from '@/utils/Storage'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { findMenuByPath } from '@/utils/menu'

export default defineComponent({
  name: 'BasicLayout',
  components: {
    MultiTab,
    RouteView,
    SideMenu,
    GlobalHeader,
    SettingDrawer
  },
  setup() {
    const router = useRouter()
    const collapsed = ref(false)
    const menus = ref([])
    const subMenus = ref([])
    const store = useStore()
    const contentPaddingLeft = computed(() => {
      if (!fixSidebar.value || isMobile.value) {
        return '0'
      }
      if (sidebarOpened.value) {
        return '256px'
      }
      return '80px'
    })

    watch(
      () => sidebarOpened.value,
      (val) => {
        collapsed.value = !val
      }
    )
    let mainMenu = ls.get(MENU_NAV)[currentApp.value]
    watch(
      () => currentApp.value,
      (val) => {
        mainMenu = ls.get(MENU_NAV)[currentApp.value]
        if (val == 'mixmenu') {
          loadMainMenu()
          loadSubMenu()
        } else {
          loadMainMenu()
        }
      }
    )

    const loadSubMenu = () => {
      subMenus.value = []
      let fullPath = router.currentRoute.value.path
      const item = findMenuByPath(mainMenu, fullPath)
      if (item && item._parentPath && item._parentPath.length > 0) {
        const root = findMenuByPath(mainMenu, item._parentPath[0])
        if (root.children && root.children.length > 0) {
          subMenus.value = root.children
        }
      }
    }
    const loadMainMenu = () => {
      if (layoutMode.value == 'mixmenu') {
        let m = JSON.parse(JSON.stringify(mainMenu))
        m.forEach((item) => {
          if (item.children && item.children.length > 0) {
            item.children = []
            item.openSideMenu = true
          }
        })
        menus.value = m
      } else {
        menus.value = mainMenu
      }
    }
    watch(
      () => layoutMode.value,
      (val) => {
        if (val == 'mixmenu') {
          loadMainMenu()
          loadSubMenu()
        } else {
          loadMainMenu()
        }
      }
    )
    watch(
      () => menuChangeFlag.value,
      (val) => {
        mainMenu = ls.get(MENU_NAV)[currentApp]
        if (val == 'mixmenu') {
          loadMainMenu()
          loadSubMenu()
        } else {
          loadMainMenu()
        }
      }
    )
    watch(
      () => router.currentRoute.value.path,
      (toPath) => {
        if (layoutMode.value == 'mixmenu') {
          loadSubMenu()
        }
      },
      { immediate: true, deep: true }
    )
    loadMainMenu()
    if (layoutMode.value == 'mixmenu') {
      loadSubMenu()
    }
    collapsed.value = !sidebarOpened.value
    onMounted(() => {
      const userAgent = navigator.userAgent
      if (userAgent.indexOf('Edge') > -1) {
        nextTick(() => {
          collapsed.value = !collapsed.value
          setTimeout(() => {
            collapsed.value = !collapsed.value
          }, 16)
        })
      }
    })

    const toggle = () => {
      collapsed.value = !collapsed.value
      store.commit(SET_SIDEBAR_TYPE, !collapsed.value)
      triggerWindowResizeEvent()
    }
    const paddingCalc = () => {
      let left = ''
      if (sidebarOpened.value) {
        left = isDesktop.value ? '256px' : '80px'
      } else {
        left = (isMobile.value && '0') || (fixSidebar.value && '80px') || '0'
      }
      return left
    }
    const menuSelect = () => {}
    const drawerClose = () => {
      collapsed.value = false
    }

    const showRouter = ref(true)
    const onRefresh = () => {
      showRouter.value = false
      nextTick(() => (showRouter.value = true))
    }
    return {
      collapsed,
      menus,
      subMenus,
      contentPaddingLeft,
      toggle,
      paddingCalc,
      menuSelect,
      drawerClose,
      multiTab,
      device,
      layoutMode,
      contentWidth,
      fixedHeader,
      navTheme,
      isMobile,
      isSideMenu,
      showRouter,
      onRefresh
    }
  }
})
</script>

<style lang="less">
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */
.page-transition-enter {
  opacity: 0;
}
.page-transition-leave-active {
  opacity: 0;
}
.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
